<template>
  <div class="app-container">
    <highcharts class="chart" :options="chartOptions" :updateArgs="updateArgs"></highcharts>

    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleProfitCurrentChange"
        :page-size="pageRequest.pageSize"
        :current-page="pageRequest.currentPage"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts/highstock';
import { parseTime } from "../../utils/index.js";

Vue.use(HighchartsVue, {Highcharts})

export default {
  data() {
    return {
      updateArgs: [true, true, {duration: 1000}],
      chartOptions: {
        chart: {
          type: 'spline',
          zoomType: 'x',
          panning: true,
          panKey: 'shift'
        },
        xAxis: {
            type: "datetime",
            title: {
                text: '时间日期'
            },
            tickPixelInterval: 150,
            labels: {
                formatter: function () {
                    return Highcharts.dateFormat('%m-%d %H:%M:%S', this.value);
                }
            }
		},
		yAxis: {
            title: {
                text: '收益金额'
            },
		},
        tooltip: {
          crosshairs: [true, true],
          xDateFormat: '%Y-%m-%d %H:%M:%S',
        },
        title: {
          text: '收益曲线'
        },
		subtitle: {
            text: null
		},
        credits:{
          enabled: false
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled: false
                },
            }
        },
        series: [{
          name: "收益",
          data: [],
          color: '#409EFF',
          showInLegend: false
        }],
      },
      pageRequest:{
          pageSize: 60,
          currentPage: 1
      },
      total: 1000,
      profitInterval: null,

      profitLogData: [],
    }
  },
  created () {
    let i = document.createElement('input')
    i.setAttribute('type', 'color');
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
        this.loadProfitLog();
        this.loadNewProfitLog()
    },
    loadProfitLog(){
        //调用后台获取收益曲线数据
        var params={
          pageSize: this.pageRequest.pageSize,
          currentPage: this.pageRequest.currentPage,
          strategyId: this.strategyId,
      }

        getProfitLog(params).then(Response =>{
            this.profitLogData=Response.data;
            this.total=Response.total;
        })

        this.chartOptions.series[0].data = this.subStringProfitLogInfo(this.profitLogData);
        this.chartOptions.subtitle.text = "共"+this.total+"条，"+Math.ceil(this.total/this.pageRequest.pageSize)+"页";
    },

    //定时刷新收益曲线
    loadNewProfitLog(){
        if(this.pageRequest.currentPage == 1){      //请求的第一页数据,才实时获取最新数据(此处只是模拟获取)
            var _pointData = this.chartOptions.series[0].data;
            this.profitInterval = setInterval(function () {
                 var param={
                    strategyId: this.strategyId,
                    total: this.total
                }
                getNewProfitLog(param).then(Response =>{
                    var logData=Response.data
                    for(let i=0;i<logData.length;i++){
                         this.chartOptions.series[0].data.splice(0,0,logData[i])
                         this.chartOptions.series[0].data.pop()
                    }
                })
            }, 5000);
        }else{
            clearInterval(this.profitInterval)
        }
    },


    // 截取收益日志文件格式
    subStringProfitLogInfo(data){
        var pointData = [];
        for(var i=0; i<data.length; i++){
            let logInfo = data[i].split(" "),
            timeStr = logInfo[0]+' '+logInfo[1],
            time = new Date(timeStr.replace(/-/g,'/')).getTime();
            pointData.push([time, parseFloat(logInfo[2])])
        }

        console.log("pointData:", pointData)
        return pointData
    },
    handleProfitCurrentChange(val){
        console.log(`当前页: ${val}`);
        this.pageRequest.currentPage = val;
        this.loadProfitLog();
    }
  }
}
</script>

<style scoped>
    
</style>
